<template>
  <div class="yh-header">
    <div class="yh-head-menu clearfix">
      <ul class="clearfix">
        <li>
          <a href="javascript:void(0)">话务</a>
        </li>
        <li>
          <a href="javascript:void(0)"></a>
        </li>
        <li>
          <a href="javascript:void(0)"></a>
          <span>
      <el-dropdown>
  <span class="el-dropdown-link">
    <i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>我的团队</el-dropdown-item>
    <el-dropdown-item>个人</el-dropdown-item>
    <el-dropdown-item>其他</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
          </span>
        </li>
        <li>
          <a href="javascript:void(0)"></a>
        </li>
        <li>
          <a href="javascript:void(0)">机构</a>
        </li>
        <li>
          <a href="javascript:void(0)">零售</a>
        </li>
      </ul>
    </div>
    <div class="yh-head-nav">
      <ul class="clearfix">
        <li v-for="(item,index) in navMenu" :key="index" @mouseover="showderails(index,item)" @mouseout="hidederails(index)">
          <a href="javascript:void(0)">{{item.meta.title}}
          </a>
          <div class="nav-showdetails clearfix" v-if="active===index" :style="'padding-left:'+ active * 80 +'px;'">
            <div class="showdetails_child fl"  v-for="a in item.children" >
              <h5>{{a.meta.title}}</h5>
              <a @click="handleClick(item.path + '/' + a.path  +'/' + b.path)" v-for="b in a.children">{{b.meta.title}}</a>
            </div>
          </div>
        </li>

      </ul>
    </div>
  </div>
</template>
<script>
import nav_assessment from '@/assets/header/nav-assessment.png'

  export default {
    name: "Headeryh",
    props: {
      menu: {
        type: Array,
        default: function() {
          return []
        }
      }
    },
    created() {
      var self = this
      if (self.menu.length != 0) {
        self.navMenu = self.menu
      }
    },
    data() {
      return {
        active: null,
        navMenu: [
        {
          path: '',
          meta: {
          icon: 'component',
          title: '工作台'
         },
         children: [
         {
            path: 'business',
            meta: { title: '客户管理1', icon: 'documentation', noCache: true },
            children: [
              {
                path: 'user_main',
                component: '',
                meta: {title: '客戶管理11', icon: '', noCache: true}
              },
              {
                path: '',
                component: '',
                meta: {title: '客戶管理12', icon: '', noCache: true}
              },
              {
                path: '',
                component: '',
                meta: {title: '客戶管理13', icon: '', noCache: true}
              },
              {
                path: '',
                component: '',
                meta: {title: '客戶管理14', icon: '', noCache: true}
              }
            ]
          }
          ]
        },
        {
          path: '',
          meta: {
          icon: 'component',
          title: '工作台'
         },
         children: [
         {
            path: '',
            meta: { title: '客户管理1', icon: 'documentation', noCache: true },
            children: [
              {
                path: '',
                component: '',
                meta: {title: '客戶管理11', icon: '', noCache: true}
              },
              {
                path: '',
                component: '',
                meta: {title: '客戶管理12', icon: '', noCache: true}
              },
              {
                path: '',
                component: '',
                meta: {title: '客戶管理13', icon: '', noCache: true}
              },
              {
                path: '',
                component: '',
                meta: {title: '客戶管理14', icon: '', noCache: true}
              }
            ]
          }
          ]
        },
        {
          path: '',
          meta: {
          icon: 'component',
          title: '工作台'
         },
         children: [
         {
            path: '',
            meta: { title: '客户管理1', icon: 'documentation', noCache: true },
            children: [
              {
                path: '',
                component: '',
                meta: {title: '客戶管理11', icon: '', noCache: true}
              },
              {
                path: '',
                component: '',
                meta: {title: '客戶管理12', icon: '', noCache: true}
              },
              {
                path: '',
                component: '',
                meta: {title: '客戶管理13', icon: '', noCache: true}
              },
              {
                path: '',
                component: '',
                meta: {title: '客戶管理14', icon: '', noCache: true}
              }
            ]
          }
          ]
        },
        {
          path: '',
          meta: {
          icon: 'component',
          title: '工作台'
         },
         children: [
         {
            path: '',
            meta: { title: '客户管理1', icon: 'documentation', noCache: true },
            children: [
              {
                path: '',
                component: '',
                meta: {title: '客戶管理11', icon: '', noCache: true}
              },
              {
                path: '',
                component: '',
                meta: {title: '客戶管理12', icon: '', noCache: true}
              },
              {
                path: '',
                component: '',
                meta: {title: '客戶管理13', icon: '', noCache: true}
              },
              {
                path: '',
                component: '',
                meta: {title: '客戶管理14', icon: '', noCache: true}
              }
            ]
          }
          ]
        },
        {
          path: '',
          meta: {
          icon: 'component',
          title: '工作台'
         },
         children: [
         {
            path: '',
            meta: { title: '客户管理1', icon: 'documentation', noCache: true },
            children: [
              {
                path: '',
                component: '',
                meta: {title: '客戶管理11', icon: '', noCache: true}
              },
              {
                path: '',
                component: '',
                meta: {title: '客戶管理12', icon: '', noCache: true}
              },
              {
                path: '',
                component: '',
                meta: {title: '客戶管理13', icon: '', noCache: true}
              },
              {
                path: '',
                component: '',
                meta: {title: '客戶管理14', icon: '', noCache: true}
              }
            ]
          }
          ]
        },
        {
          path: '',
          meta: {
          icon: 'component',
          title: '工作台'
         },
         children: [
         {
            path: '',
            meta: { title: '客户管理1', icon: 'documentation', noCache: true },
            children: [
              {
                path: '',
                component: '',
                meta: {title: '客戶管理11', icon: '', noCache: true}
              },
              {
                path: '',
                component: '',
                meta: {title: '客戶管理12', icon: '', noCache: true}
              },
              {
                path: '',
                component: '',
                meta: {title: '客戶管理13', icon: '', noCache: true}
              },
              {
                path: '',
                component: '',
                meta: {title: '客戶管理14', icon: '', noCache: true}
              }
            ]
          }
          ]
        },
        {
          path: '',
          meta: {
          icon: 'component',
          title: '工作台'
         },
         children: [
         {
            path: '',
            meta: { title: '客户管理1', icon: 'documentation', noCache: true },
            children: [
              {
                path: '',
                component: '',
                meta: {title: '客戶管理11', icon: '', noCache: true}
              },
              {
                path: '',
                component: '',
                meta: {title: '客戶管理12', icon: '', noCache: true}
              },
              {
                path: '',
                component: '',
                meta: {title: '客戶管理13', icon: '', noCache: true}
              },
              {
                path: '',
                component: '',
                meta: {title: '客戶管理14', icon: '', noCache: true}
              }
            ]
          }
          ]
        },

        ],
        navList: [{
            name: "工作台",
            children: [{
                th: "客户管理-1",
                td:[
                  {tdli: "客户服务-1asd"},
                  {tdli: "客户服务-1sdf2"}
                ]
              },
              {
                th: "客户管理-1das1",
                td:[
                  {tdli: "客户服务-11das"},
                  {tdli: "客户服务-11dsaf2"}
                ]
              }
            ]
          },
          {
            name: "商机管理",
            children: [{
                th: "客户管理-1",
                td:[
                  {tdli: "客户服务-1asdf"},
                  {tdli: "客户服务-1dasf2"}
                ]
              },
              {
                th: "客户管理-11",
                td:[
                  {tdli: "客户服务-1dasf1"},
                  {tdli: "客户服务-1das12"}
                ]
              }
            ]
          },
          {
            name: "客户服务",
            children: [{
                th: "客户管理-1asdf",
                td:[
                  {tdli: "客户服务-1"},
                  {tdli: "客户服务-1w2"}
                ]
              },
              {
                th: "客户管理-11",
                td:[
                  {tdli: "客户服务-1wer1"},
                  {tdli: "客户服务-11weq2"}
                ]
              }
            ]
          },
          {
            name: "考核管理",
            children: [{
                th: "客户管理-1",
                td:[
                  {tdli: "客户服务-11"},
                  {tdli: "客户服务-1342"}
                ]
              },
              {
                th: "客户管理-1321",
                td:[
                  {tdli: "客户服务-11"},
                  {tdli: "客户服务-11342"}
                ]
              }
            ]
          },
          {
            name: "员工管理",
            children: [{
                th: "客户管理-14",
                td:[
                  {tdli: "客户服务-134"},
                  {tdli: "客户服务-1532"}
                ]
              },
              {
                th: "客户管理-1341",
                td:[
                  {tdli: "客户服务-1341"},
                  {tdli: "客户服务-11342"}
                ]
              }
            ]
          },
          {
            name: "产品管理",
            children: [{
                th: "客户管理-21",
                td:[
                  {tdli: "客户服务-11"},
                  {tdli: "客户服务-1233"}
                ]
              },
              {
                th: "客户管理-131",
                td:[
                  {tdli: "客户服务-22"},
                  {tdli: "客户服务-11222"}
                ]
              }
            ]
          },
          {
            name: "工作管理",
            children: [{
                th: "客户管理-11",
                td:[
                  {tdli: "客户服务-13"},
                  {tdli: "客户服务-1222"}
                ]
              },
              {
                th: "客户管理-131",
                td:[
                  {tdli: "客户服务-1221"},
                  {tdli: "客户服务-111"}
                ]
              }
            ]
          },
          {
            name: "系统管理",
            children: [{
                th: "客户管理-13",
                td:[
                  {tdli: "客户服务-11"},
                  {tdli: "客户服务-11"}
                ]
              },
              {
                th: "客户管理-11",
                td:[
                  {tdli: "客户服务-1111"},
                  {tdli: "客户服务-11112"}
                ]
              }
            ]
          }
        ]
      };
    },

    methods: {
      // 鼠标移入li元素显示，移除消失详情栏
      showderails: function (index, item) {
        this.active = index;
      },
      hidederails: function (index) {
        this.active = null;
      },
      handleClick(path) {
        console.log("path:" + path)
        this.$router.push({path: path})

      }
    }
  };

</script>
<style scoped>
  .fl {
    float: left;
  }

  .fr {
    float: right;
  }

  .clearfix:after {
    content: "";
    clear: both;
    display: block;
    height: 0;
  }

  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  font,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    font-weight: normal;
  }

  input {
    background: none;
    outline: none;
    border: 0px;
    text-indent: 10px;
  }

  a {
    text-decoration: none;
    color: #000;
  }

  body {
    line-height: 1;
    font-family: "Microsoft YaHei", "Franklin Gothic Medium", "Arial Narrow", Arial,
    sans-serif;
  }

  ol,
  ul {
    list-style: none;
  }

  li {
    list-style: none;
  }

  blockquote,
  q {
    quotes: none;
  }

  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: "";
    content: none;
  }

  /* remember to define focus styles! */

  :focus {
    outline: 0;
  }

  /* remember to highlight inserts somehow! */

  ins {
    text-decoration: none;
  }

  del {
    text-decoration: line-through;
  }

  /* tables still need 'cellspacing="0"' in the markup */

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  .yh-header {
    height: 96px;
    width: 100%;
    background: url(/static/assets/header/top.png) center right no-repeat;
  }

  .yh-header .yh-head-menu {
    width: 100%;
    height: 56px;
    background: url(/static/assets/header/top-logo.png) 3% center no-repeat;
  }

  .yh-header .yh-head-menu ul {
    height: 26px;
    margin-top: 30px;
    float: right;
    font-size: 13px;
  }

  .yh-header .yh-head-menu ul li {
    float: left;
    width: 30px;
    height: 26px;
    line-height: 26px;
    margin-right: 20px;
  }

  .yh-header .yh-head-menu ul li a {
    color: #fff;
    display: block;
    width: 100%;
    height: 100%;
  }

  .yh-header .yh-head-menu ul li:nth-child(6) {
    margin-right: 30px;
  }

  .yh-header .yh-head-menu ul li:nth-child(5) {
    margin-right: 37px;
  }

  .yh-header .yh-head-menu ul li:nth-child(4) {
    background: url(/static/assets/header/top-loginout.png) center center no-repeat;
  }
  .yh-header .yh-head-menu ul li:nth-child(3) {
    margin: 0;
    width: 40px;
    background: url(/static/assets/header/top-man.png) left center no-repeat;
  }
    .yh-header .yh-head-menu ul li:nth-child(3) span {
      display: inline-block;
      width: 16px;
      height: 16px;
    }
    .el-dropdown-menu {
      background: #fff;
    }
    .yh-header .yh-head-menu ul li:nth-child(3) span .el-dropdown {
      height: 16px;
    }
    .yh-header .yh-head-menu ul li:nth-child(3) a{
      display: inline-block;
      width: 20px;
    }
  .yh-header .yh-head-menu ul li:nth-child(2) {
    margin-right: 6px;
    background: url(/static/assets/header/top-q.png) center center no-repeat;
  }
    .yh-header .yh-head-menu ul li:nth-child(1) {
      margin-right:7px;
      margin-top: 2px;
      width: 50px;
      height: 20px;
      padding-left: 4px;
      background: #fff;
      border-radius: 5px;
    }
  .yh-header .yh-head-menu ul li:nth-child(1) a{
    color: #000;
    width: 40px;
    line-height: 19px;
    text-align: right;
    background: url(/static/assets/header/top-hw.png) left center no-repeat;
  }

  /* 导航栏 */

  .yh-header .yh-head-nav {
    height: 40px;
    width: 100%;
  }

  .yh-header .yh-head-nav ul {
    position: relative;
  }

  .yh-header .yh-head-nav ul li {
    float: left;
    /* width: 9%; */
    line-height: 40px;
    font-size: 14px;
  }

  .yh-header .yh-head-nav ul li a {
    padding-left: 30px;
    color: #ded1c4;
    width: 100%;
    height: 100%;
    display: block;
    text-align: left ;
    margin-left: 20px;
  }

  .yh-header .yh-head-nav ul li:nth-child(1) a {
    background: url(/static/assets/header/nav-work1.png) 0% 55% no-repeat;
  }

  .yh-header .yh-head-nav ul li:nth-child(1):hover a,
  .yh-header .yh-head-nav ul li:nth-child(1).active a {
    color: #fff;
    background: url(/static/assets/header/nav-work.png) 0% 55% no-repeat;
  }

  .yh-header .yh-head-nav ul li:nth-child(2) a {
    background: url(/static/assets/header/nav-business1.png) 0% 55% no-repeat;
  }

  .yh-header .yh-head-nav ul li:nth-child(2):hover a,
  .yh-header .yh-head-nav ul li:nth-child(2).active a {
    color: #fff;
    background: url(/static/assets/header/nav-business.png) 0% 55% no-repeat;
  }

  .yh-header .yh-head-nav ul li:nth-child(3) a {
    background: url(/static/assets/header/nav-customer1.png) 0% 55% no-repeat;
  }

  .yh-header .yh-head-nav ul li:nth-child(3):hover a,
  .yh-header .yh-head-nav ul li:nth-child(3).active a {
    color: #fff;
    background: url(/static/assets/header/nav-customer.png) 0% 55% no-repeat;
  }

  .yh-header .yh-head-nav ul li:nth-child(4) a {
    background: url(/static/assets/header/nav-assessment1.png) 0% 55% no-repeat;
  }

  .yh-header .yh-head-nav ul li:nth-child(4):hover a,
  .yh-header .yh-head-nav ul li:nth-child(4).active a {
    color: #fff;
    background: url(/static/assets/header/nav-assessment.png) 0% 55% no-repeat;
  }

  .yh-header .yh-head-nav ul li:nth-child(5) a {
    background: url(/static/assets/header/nav-staff1.png) 0% 55% no-repeat;
  }

  .yh-header .yh-head-nav ul li:nth-child(5):hover a,
  .yh-header .yh-head-nav ul li:nth-child(5).active a {
    color: #fff;
    background: url(/static/assets/header/nav-staff.png) 0% 55% no-repeat;
  }

  .yh-header .yh-head-nav ul li:nth-child(6) a {
    background: url(/static/assets/header/nav-product1.png) 0% 55% no-repeat;
  }

  .yh-header .yh-head-nav ul li:nth-child(6):hover a,
  .yh-header .yh-head-nav ul li:nth-child(6).active a {
    color: #fff;
    background: url(/static/assets/header/nav-product.png) 0% 55% no-repeat;
  }

  .yh-header .yh-head-nav ul li:nth-child(7) a {
    background: url(/static/assets/header/nav-work_1.png) 0% 55% no-repeat;
  }

  .yh-header .yh-head-nav ul li:nth-child(7):hover a,
  .yh-header .yh-head-nav ul li:nth-child(7).active a {
    color: #fff;
    background: url(/static/assets/header/nav-work_.png) 0% 55% no-repeat;
  }

  .yh-header .yh-head-nav ul li:nth-child(8) a {
    background: url(/static/assets/header/nav-set1.png) 0% 55% no-repeat;
  }

  .yh-header .yh-head-nav ul li:nth-child(8):hover a,
  .yh-header .yh-head-nav ul li:nth-child(8).active a {
    color: #fff;
    background: url(/static/assets/header/nav-set.png) 0% 55% no-repeat;
  }

  .yh-header .yh-head-nav ul li .nav-showdetails {
    position: absolute;
    top: 40px;
    left: 0;
    /* display: block; */
    width: 100%;
    height: 200px;
    box-shadow: #d5dcd8 0px 4px 6px;
    box-sizing: border-box;
    z-index: 1000;
    background: #fff;
  }

  .yh-header .yh-head-nav ul li .nav-showdetails .showdetails_child{
    width:160px;
    padding-left: 50px;
    display: inline-block;
    box-sizing: border-box;
  }
  .yh-header .yh-head-nav ul li .nav-showdetails .showdetails_child a {
    /* display: inline-block; */
    padding: 0;
    color: #000;
    height: 20px;
    line-height: 20px;
    margin: 0;
  }

</style>
